import { defineComponent } from "vue";
import classes from "./index.module.scss"
import MenuIndex from "@/components/MenuIndex";
import Telescoping from "@/components/Telescoping";

export default defineComponent({
  name: "promotion",
  setup() {
    return () => (
      <MenuIndex>
        <Telescoping
          firstConfig={{
            minWidth: "200px", 
            maxWidth: "1000px"
          }}
          v-slots={{
            firstNode: () => <div>left</div>,
            secondNode: () => <Telescoping
              firstConfig={{
                minHeight: "200px", 
                maxHeight: "600px"
              }}
              type="column"
              v-slots={{
                firstNode: () => <Telescoping
                firstConfig={{
                  minWidth: "200px", 
                  maxWidth: "300px"
                }}
                v-slots={{
                  firstNode: () => <div>left</div>,
                  secondNode: () => <div>right</div>
                }}
              ></Telescoping>,
                secondNode: () => <div>bootom</div>
              }}
            ></Telescoping>
          }}
        ></Telescoping>
      </MenuIndex>
    )
  }
})